<template>
  <div class="footer-wrap">
    <ul>
      <li :class="this.$route.path === '/index' ? 'active' : ''">
        <router-link tag="a" to="/">
          <span class="iconfont niceicon-3"></span>
          <span class="name">发现</span>
        </router-link>
      </li>
      <li :class="this.$route.path === '/videolist' ? 'active' : ''">
        <router-link tag="a" to="/videolist">
          <span class="iconfont niceicon-9"></span>
          <span class="name">视频</span>
        </router-link>
      </li>
      <li :class="this.$route.path === '/my' ? 'active' : ''">
        <router-link tag="a" to="/my">
          <span class="iconfont niceicon-2"></span>
          <span class="name">我的</span>
        </router-link>
      </li>
      <li :class="this.$route.path === '/songlist' ? 'active' : ''">
        <router-link tag="a" to="/songlist">
          <span class="iconfont niceicon-5"></span>
          <span class="name">歌单</span>
        </router-link>
      </li>
      <li :class="this.$route.path === '/user' ? 'active' : ''">
        <router-link tag="a" to="/user">
          <span class="iconfont niceicon-4"></span>
          <span class="name">账号</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  methods: {

  }
}
</script>

<style lang="stylus" scoped>
  .footer-wrap {
    width: 100%;
    height: 1.3rem;
    background: #141E30;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #243B55, #141E30);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #243B55, #141E30); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    position: fixed;
    left: 0;
    bottom: 0rem;
    z-index: 100;
    ul {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      li {
        a {
          display: flex;
          flex-direction: column;
          align-items: center;
          .iconfont {
            width: 0.6rem;
            height: 0.6rem;
            border-radius: 50%;
            margin-bottom: 0.15rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.35rem;
          }
          span {
            font-size: 0.24rem;
            font-family: SFProText-Medium;
            font-weight: 200;
            color: #ffffff;
            line-height: 0.24rem;
          }
        }
        &.active {
          a {
            .iconfont {
              background: #ff5b73;
              font-size: 0.3rem;
              color: #fff;
            }
            span {
              color: #ff5b73;
              font-weight: 500;
            }
          }
        }
      }
    }
  }
</style>
